<!DOCTYPE html>
<html class="layui-border-box">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>LAYUI ADMIN</title>
  <link href="./assets/favicon.ico" type="image/x-icon" rel="shortcut icon">
  <!-- style -->
  <link href="https://www.layuicdn.com/layui/css/layui.css" type="text/css" rel="stylesheet">
  <!-- <link href="./css/admin.css" type="text/css" rel="stylesheet"> -->
  <style>
    #layApp {
      height: 100vh; /* 这个样式可删可不删 */
    }
  </style>
</head>

<body class="layui-layout-body">
  <div id="layApp" class="layui-layout-admin">

    <div class="layui-header">
      <div class="layui-logo">
        <img src="./assets/logo-black.png">
      </div>
      <ul class="layui-nav layui-layout-left">
        <li layadmin-event="collapse" class="layui-nav-item" lay-unselect>
          <a><i id="layadmin-collapse-toggle" class="layui-icon layui-icon-shrink-right"></i></a>
        </li>
      </ul>

      <div class="layui-nav layui-layout-left">
        <span class="layui-breadcrumb">
          <a href="">首页</a>
          <a href="">控制台</a>
          <a><cite>主控台</cite></a>
        </span>
      </div>

      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-notice"></i>
            <span class="layui-badge-dot"></span>
          </a>
          <dl class="layui-nav-child">
            <dd layadmin-event="online" lay-unselect><a href="javascript:;">在线人数：<strong>56</strong></a></dd>
            <dd layadmin-event="netapply" lay-unselect><a href="javascript:;">网上申请：<strong>3</strong></a></dd>
          </dl>
        </li>
        <li layadmin-event="fullscreen" class="layui-nav-item layui-hide-xs hint--bottom" aria-label="fullscreen" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-screen-full"></i>
          </a>
        </li>
        <li class="layui-nav-item" lay-unselect>
          <a href="javascript:;">
            <cite>管理员</cite>
          </a>
          <dl class="layui-nav-child" style="text-align: center;">
            <dd layadmin-event="center" lay-unselect><a href="javascript:;">个人中心</a></dd>
            <dd layadmin-event="password" lay-unselect><a href="javascript:;">修改密码</a></dd>
            <hr>
            <dd layadmin-event="logout" lay-unselect><a href="javascript:;">退出</a></dd>
          </dl>
        </li>
        <li layadmin-event="setter" lay-tips="" class="layui-nav-item" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>

    <div class="layui-side" id="layadmin-side">
      <!-- logo -->
      <div class="layui-logo" lay-href="">
        <img src="./assets/logo.png">
        <span>layui admin</span>
      </div>
      <!-- navmenu -->
    </div>

    <div class="layui-body layui-tab" id="layadmin-pagetabs" lay-unauto lay-allowclose="true">
      <ul class="layui-tab-title">
        <li class="layui-this" lay-id="0101" lay-attr="home/index.html" lay-lock="true">
          <i class="layui-icon layui-icon-home"></i>
        </li>
      </ul>
      <!-- 页面部分 -->
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <iframe src="./views/home/0001.html" allowfullscreen="true" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  </div>

  <script src="https://www.layuicdn.com/layui/layui.js"></script>
  <script>
    layui.config({
      base: './js/'
    }).extend({
      navmenu: 'layout/navmenu',
      index: 'index',
    }).use(['jquery', 'navmenu', 'index'], function() {
      var $ = layui.jquery;
      var setter = layui.setter;

      $.get('./mock/navmenu.json', function(res) {
        // var admin = layui.admin;
        // var navmenu = admin.plugins.navmenu;
        layui.navmenu.render({
          el: '#layadmin-side',
          data: res
        });

        // admin.$on('side-flexible', function(status) {
        //   if (admin.screen() < 2) {
        //     navmenu.flexible(false);
        //   } else {
        //     navmenu.flexible(status !== 'spread');
        //   }
        // });
        // admin.$on('pagetabs', function(data) {
        //   navmenu.select(data.id);
        // });
        // navmenu.$on('select.NavMenu', function() {
        //   if (admin.screen() < 2) {
        //     admin.events.shade()
        //   }
        // });
      });

      // $('#layadmin-pagetabs-header').niceScroll({
      //   touchbehavior: false,
      //   cursorwidth: '6px',
      //   cursorcolor: '#909399',
      //   cursoropacitymax: 1,
      //   cursorborder: 0,
      //   cursorborderradius: '4px',
      //   autohidemode: 'leave'
      // });
    })
  </script>
</body>

</html>
